<template>
    <div>
        <div class="search">
            <van-search shape="round" @click="goToSearch" v-model="value" placeholder="搜索商品名称" />
        </div>
        <!-- 搜索框 -->
        <div class="sort-select">
           <div class="select-left" ref="leftScroll">
             <div class="left-list" @click="changeList(index)" :class="{active: listIndex == index }" v-for="(i,index) in leftSelectList" :key="i.block_id">
                 <span>{{ i.category_name }}</span>
            </div>
        </div>
        <!-- 左边类型列表 -->

           <div class="select-right">
            <van-swipe style="height: 85vh;" @change="onChange" ref="banner" vertical :show-indicators="false" :loop="false" initial-swipe="1">
                <!-- <div v-for="(i,index) in leftSelectList" :key="i.block_id">
                    <van-swipe-item>
                    <SelectRightNow :ids=leftSelectList[index]?.category_id></SelectRightNow>
                    </van-swipe-item>
                </div> -->
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[0]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[1]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[2]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[3]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[4]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[5]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[6]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[7]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[8]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[9]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[10]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[11]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[12]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[13]?.category_id></SelectRightNow>
                </van-swipe-item>
                <van-swipe-item>
                    <SelectRightNow :banners="bannerIndex" :ids=leftSelectList[14]?.category_id></SelectRightNow>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 右边轮播图显示界面 -->
        </div>
        <!-- 页面下方部分 -->
    </div>
</template>

<script>
import {getSelectListApi} from '../assets/api' 
import SelectRightNow from '../components/SortView/SelectRightNow.vue'

export default{
    data(){
        return{
            value:'',
            leftSelectList:'',
            rightGoodsList:'',
            listIndex:1,
            switch:false,
            bannerIndex:1,
            null:0
        }
    },
    methods:{
        async getLeftList(){
            let url = getSelectListApi()
            let {data} = await this.$http(url)
            this.leftSelectList = data.data
        },
        //请求右边页面
        changeList(index){
            this. switch = true
            this.listIndex = index

        },
        //左侧点击事件
        onChange(index){
            this.bannerIndex = index
            let topHeight = document.getElementsByClassName('left-list')
            this.$refs.leftScroll.scrollTop =( topHeight[index].offsetTop - (6*topHeight[0].offsetTop) )
            if(this.switch == false){
                this.listIndex = index
            }
        },
        // 滑动切换事件
        goToSearch(){
           this.$router.push({
            path:'/search'
           })
        }
    },
    mounted(){
        this.getLeftList()
    },
    computed:{
       bunnerHeight(){
            let height = window.screen.height 
            return height
       }
    //    计算轮播图高度
    },
    watch:{
        listIndex(to,from){
            if(this.switch == true){
                // console.log(from);
                this.null = from
                this.$refs.banner.swipeTo(to) 
                }
                this.switch = false
        }
        //左侧点击切换监听

    },
    components:{
        SelectRightNow,
    }
}
</script>

<style lang="scss" scoped>
.search{
    width: 95%;
    margin: 0 auto;
}
.sort-select{
    display: flex;
    overflow: hidden;
    height: 93vh;
    scrollbar-width: none;
    .select-left{
        margin: 0 0 0 0;
        width: 21vw;
        height: 84vh;
        font-size: 12px;
        overflow: scroll;
        scrollbar-width: none;
        .left-list{
            height: 7vh;
            text-align: center;
            line-height: 7vh;
            &.active{
                font-weight: bolder;
            }
        &.active::after{
            content: "";
            display: block;
            width: .7vw;
            height: 1.7vh;
            background: #ff5934;
            position: relative;
            left: 0;
            top: -4.5vh;
         }
        }

    }
    .select-right{
        width: 85%;
        margin: 0 0 0 4vw;
    }
}
</style>